Hace poco me preguntaban la forma de añadir imágenes en las etiquetas. No era tan sencillo, no se trataba de aplicar una imagen para todas las categorías, sino de una imagen especifica para cada categoría.
Estuve hurgando en la plantilla, y para qué engañarnos y decir que tenía una pequeña idea de como hacerlo si en realidad no sabía por donde empezar.
Como suele ser habitual busqué información, no encontré nada sobre el tema, al final tuve que abusar una vez más de la amabilidad de J.Miur de Vagabundia y su respuesta no se hizo de esperar.
Sigilosamente tomé nota de los datos que proporciona sobre el tema, pero aún así les recomiendo leer sus explicaciones que estoy segura supera con creces la que yo pueda dar.

Para empezar deberemos buscar un alojamiento que nos proporcione una url fija para las imágenes, es decir un lugar donde al subir las imágenes tengan todas la misma dirección exceptuando el nombre de las imágenes.Yo las he alojado en Google Pages pero J.Miur nos informa que en Photobucket, Fileden y Hostfile también pueden conseguir una url fija.

Una url fija sería:
http://nombre.servidor/imagen.extensión

Todas las imágenes deben tener la misma extensión y formato, da igual sea jpg. gif. png. pero todas la misma. Lo único que cambiará es el nombre del archivo.

Si por ejemplo queremos añadir una imagen a la etiqueta de herramientas el archivo de la imagen debe llamarse herramientas y así sucesivamente con todas las imágenes.

Otro ejemplo:
http://forevergema.googlepages.com/herramientas.png
forevergema es el nombre que tengo asignado en el servidor
googlepages.com/ el servidor
herramientas el nombre del archivo
.png es la extensión

J.Miur explica dos lugares donde añadir las imágenes para las etiquetas, una sería en el listado de la sidebar y otra justo debajo de la entradas.
Yo voy a explicar la segunda que parece ser la que estamos más predispuestos a "decorar"

Nos situaremos en nuestra plantilla y clicaremos en Edición HTML, marcaremos la casilla para expandir la plantilla de artilugios y buscaremos lo siguiente:

<b:includable id='post' var='post'>

Lo que sigue a continuación puede variar de unas plantillas a otras, yo voy a añadirlo según J.Miur y a continuación lo que aparece en la plantilla Minima que es la mía.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>


Esta parte es la que hay que buscar en la plantilla Minima y donde yo tuve que hacer la modificación:
<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>


De cualquiera de las formas las modificaciones son las mismas, se trata de
sustituir el texto de la categoría por una imagen y para ello eliminaremos <data:label.name/> y en su lugar añadiremos:
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/>

También vamos a suprimir la coma de separación que encontraremos en la línea donde dice:
<b:if cond='data:label.isLast != "true"'>,</b:if>



Si deseamos añadir las imágenes sin suprimir el texto de la categoría lo haremos suprimiendo de la misma forma <data:label.name/> y en su lugar añadiremos:
<img expr:src='"http://nuestro_servidor/" + data:label.name + ".ext"'/> <data:label.name/>

Carmen

Hola, Gema, como siempre, sobresaliente trabajo, muchísimas gracias por tu excelente trabajo de investigación. De hecho esto me resulta muy útil, porque yo buscaba algo parecido, así que tiemble mi blog de prácticas que voy a intentar poner imágenes a todas las etiquetas!Te debo un mail (no te lo debo, será un placer). Hasta pronto, un abrazo.

Responder
Anónimo

Interesante ¡¡ A ver si un dia me pongo en serio con la plantilla :D

Salu2

Responder
Gem@

Hola Carmen, me alegra mucho verte de nuevo, intenté acceder a tu blog pero he visto que está restringido.
Espero que te resulte bien el experimento ;)
Otro abrazo.

Joseca inténtalo antes en un blog de pruebas ya me dirás que tal resulta ;)

Responder
David Sardinero

Hola gema, me gustaria pedirte la posibilidad de que explicaras como cambiar tambien los iconos que aparecen en las etiquetas en la sidebar

Muchisimas gracias de antemano!

Responder
Anónimo

Hola Gema, disculpa el desvío del tema pero leo en los comentarios a la entrada de JMiur que tenias problemas con Googlepages, que descubriste que habías excedido el ancho de banda, y que ya lo habias solucionado.

Yo estoy en la fase 2 del tema. ¿Cómo lo arreglaste? Yo he borrado y cargado en otro sitio varios archivos que usaba en scripts; pero nada, un desastre.

¿Qué tengo que hacer? ¿A quién hay que pagarle? Buf vaya desastre, sólo pensar en realojar y en muchos casos REHACER las imágenes... ¿Cómo se solucionó lo tuyo?

Gracias de antemano, te pondré una velita como Sta. Gema porque siempre que tengo un problema recurro a ti, y ya van varios!

Gracias!

Responder
Gem@

Como sabrás cuando se excede el ancho de banda los archivos dejan de tener función.
Lo que hice fue crear una nueva cuenta.
En esa nueva cuenta alojé los dos últimos archivos que al parecer habían sido los que llegaron al límite de la cuenta y ya los posteriores irán a parar allí a la nueva cuenta.
Normalmente y según he ido leyendo en comentarios y foros no hay información sobre este tema del ancho de banda. Sabemos que tenemos 100MB de capacidad de almacenamiento pero no hay forma de saber cuanto nos queda libre o qué espacio tenemos ocupado (Enorme error)

¿Solución? crear tantas cuentas como espacio necesites ;)

Responder
Gem@

Bienvenido David antes de nada quiero aclarar que no es lo mismo añadir una etiqueta a las categorías (una misma imagen para todas) que añadir una imagen que identifique cada categoría .
Ya me dirás si es lo mismo que explicamos en esta entrada pero aplicado a la sidebar o te refieres a cambiar esa flecha que señala cada una de tus categorías por una imagen igual para todas. ;)

Responder
Mr. Prado

¡Ya he solucionado lo del dominio Gema!

Si es que buscando y preguntando, se llega a todos lados.

Un saludillo!

Responder
Gem@

Mr Prado pero lo que hiciste era redirigir la dirección de blogspot al nuevo dominio ¿no?
Yo pensaba que querías acceder con las dos direcciones :(

Responder
Anónimo

Gema, muchisimas gracias, lo he hecho pero hasta ahora sin resultado... sigo traspasando archivos, de todos modos parece ser que excedí el límite mensual (hoy es 29) con lo que el día 1, ¿debería soluocinarse, al menos hasta nueva saturación? ¿o será algo definitivo para esta cuenta...? sigo investigando y traspasando archivos...

Gracias Gema, eres un sol.

Responder
Mr. Prado

Sí Gema realmente quería hacer eso pero bueno, como eso lo veo "complicado" al final he conseguido que el nuevo dominio sea la página principal y no al contrario, es decir que el nuevo dominio fuera redireccionado a la antigua URL de Blogger como estaba hasta ayer.

Pensandolo bien, ¿qué mas da? Realmente todos van a llegar a mi blog, no se va a perder ninguno. Desde mientrastudormias.blogspot.com o desde mientrastudormias.es, y también las direcciones con las respectivas www. ¡Cómo para no llegar a visitarme, jeje!

Al final espero que se imponga el nuevo dominio porque es la dirección "real" y la más fácil de recordar.

¡Saludos y gracias por tu atención!

Responder
Rociobrujita

Hola bonita
madre mia
casi nada
lo intente pero yo soy muy burrina para estas cosas.
mi blog es

http://brujicocina.blogspot.com/

gracias

Responder
Gem@

La Blogueria ¿límite mensual? yo no tenía idea de eso ¿donde has obtenido la información? porque mira que he buscado en Google no encontré respuesta.
Si fuera así sería una bendición todo volvería a funcionar o mejor dicho ya estaría funcionando.

Mr Prado todo está bien si es de tu agrado ;) Ahora te encontraremos fácilmente :D

Rocío ten paciencia, haz paso a paso las explicaciones y si pruebas en un blog de pruebas (valga la redundancia) mejor que mejor.
Eso si... hazlo con la misma plantilla ;)

Responder
conely

Hola Gema, siempre paso por tu blog y hasta ahora no habia comentado, me gustan muchos tus datos =)
Vengo una consultilla, este dato es super bueno,pero sabes como colocarlo en blogger antiguo? sabes que me cambié al blogger nuevo pero no me gusto, me quedo con el clásico, asi que volvi al viejo y querido blogger. Se podrá hacer lo mismo?

Bsos!!!!

Responder
Gem@

Hola conely pues siento no poder ayudarte me temo que no es posible, sin embargo quizás haya una posibilidad aunque yo no he probado, puedes intentarlo si accedes a la plantilla de esta forma.
En su día yo estuve haciendo pruebas y siguiendo los pasos pude modificar algunas cosas de la plantilla con este método.

Responder
Unknown

Hola, que tal, este tema me ha sido de bastante interes pero me guataria saber somo se aplicaria las etiquetas en la Sidebar, para que no salga el tipico: * Photoshop (8) y salga en lugar d eso una etiqueta en forma de imagen que reemplace a lo anterior.

Gracias =).

Responder
Rakar

Hola GEM@ es interesante tu blog.. valla que he encontrado dos blog buenos al día de hoy... el tuyo y el de LaBlogería.. pero bueno trataré de realizar lo de este post.. luego les comento como me quedo...

por cierto mi blog es http://elpoptuneco.blogspot.com

Responder
Gem@

Noisuf en la entrada hay un enlace a la forma de añadir la imagen en la sidebar.

Suerte Rakar ;)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top